<template>
  <n-card title="历史记录" closable @close="show = false" v-if="show">
    <n-space justify="space-around">
      <n-statistic label="初级">
        <span v-if="record.初级">{{ record.初级 }}秒</span>
        <span v-else>/</span>
      </n-statistic>
      <n-statistic label="中级">
        <span v-if="record.中级">{{ record.中级 }}秒</span>
        <span v-else>/</span>
      </n-statistic>
      <n-statistic label="高级">
        <span v-if="record.高级">{{ record.高级 }}秒</span>
        <span v-else>/</span>
      </n-statistic>
    </n-space>
  </n-card>
</template>
<script setup>
import { ref } from 'vue'

defineProps({
  record: {
    type: Object
  }
})

let show = ref(true)
</script>
<style scoped>
.n-card {
  max-width: 300px;
  position: absolute;
  top: 60px;
  right: 0;
}
</style>
